<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			body {
				background-color: mediumaquamarine;
			}

			#box {
				display: flex;
				flex-direction: column;
				border-radius: 20px;
				overflow: hidden;
				margin: 10px;
				height: 500px;
				width: 300px;
				background-color: whitesmoke;
			}

			/* 头部部分 */
			.phead {
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 20px;
				background-color: white;
			}

			/* 身体类容部分 */
			.pbody {
				overflow: auto;
				flex: 8;
				flex-direction: column;
			}

			.pbody::-webkit-scrollbar {
				display: none; //隐藏滑动条
			}

			.shop {
				margin-top: 5px;
				margin-left: 5px;
				border-radius: 5px;
				width: 290px;
				height: 100px;
				display: flex;
				background-color: white;
			}

			.checkbox_box {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 2;
			}

			.img_box {
				flex: 7;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			img {
				width: 80%;
				height: 80%;
				border-radius: 10px;
			}

			.name_box {
				position: relative;
				flex: 11;
				display: flex;
				flex-direction: column;
			}

			.jia,
			.jian {
				font-size: 18px;
				border: 1px solid grey;
				background-color: white;
				width: 20px;
				height: 20px;
			}

			.jia {

				border-radius: 0px 5px 5px 0;

			}

			.jian {
				border-radius: 5px 0px 0px 5px;
			}

			.number {
				text-align: center;
				width: 25px;
				height: 17px;
			}

			.name {
				flex: 1;
				display: flex;
				align-items: center;

			}

			.jg {
				margin-right: 10px;
				color: coral;
			}

			.shu {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.drop {
				right: 5px;
				position: absolute;
				border-radius: 2px;
				width: 35px;
				height: 20px;
				font-size: 12px;
				border: 0;
				background-color: orange;
			}

			.btn_s {
				right: 5px;
				position: absolute;
				display: flex;
			}

			/* 底部全选框,总价格 显示,结算按钮*/
			.pbottom {
				font-size: 15px;
				color: grey;
				padding-left: 10px;
				flex: 1;
				display: flex;
				align-items: center;
				background-color: white;

			}

			/* 全部复选款按钮样式 */
			input[type='checkbox'] {
				width: 20px;
				height: 20px;
				background-color: #fff;
				-webkit-appearance: none;
				border: 2px solid gainsboro;
				border-radius: 50%;
			}

			/* 触发后样式 */
			input[type='checkbox']:checked {
				background: url("img/7.jpg") no-repeat;
				background-size: cover;
			}

			.p {
				margin-left: 5px;
			}

			.p1 {
				margin-left: 90px;
			}

			.total_prices {
				color: orangered;
				font-size: 18px
			}

			.close_btn {
				margin-left: 10px;
				width: 60px;
				height: 25px;
				border: 0;
				background-color: coral;
				color: white;
				border-radius: 15px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="phead">购物车</div>
			<!-- 装商品的盒子 -->
			<div class="pbody">
				<!-- 商品骨架 -->
			</div>
			<!-- 底部按钮 -->
			<div class="pbottom">
				<input type="checkbox" class="all_checkbox"> <span class="p">全选</span>
				<span class="p1">合计:</span><span class="total_prices">￥0</span>
				<button class="close_btn">结算</button>
			</div>
		</div>
	</body>
	<script>
		var sonbox = document.querySelector('.pbody')
		var mysoncart = window.opener.mycart

		function myload() {
			sonbox.innerHTML = ''
			for (let i = 0; i < mysoncart.length; i++) {
				sonbox.innerHTML += `
					<div class="shop">
						<div class="checkbox_box"><input type="checkbox" class="checkbox" onclick="mysonIpt()"></div>
						<div class="img_box"><img src=${mysoncart[i].img} alt=""></div>
						<div class="name_box">
							<p class="name">${mysoncart[i].name}</p>
							<div class="shu">
								<span class="jg">￥${mysoncart[i].price}</span>
								<div class="btn_s">
								<button class='jian' onclick="fn(${i},${-1})">-</button>
								<input type="text" class="number" value="${mysoncart[i].number}">
								<button class='jia' onclick="fn(${i},${1})">+</button>
								<button class='mydel' onclick="mydelete(${i})">删除</button>
								</div>
							</div>
						</div>
					</div>`
			}
		}

		function fn(index, num) {
			//子页面加减计算
			let oIpt = document.querySelectorAll('.number')
			mysoncart[index].number += num
			if (mysoncart[index].number < 0) {
				mysoncart[index].number = 0
			}
			oIpt[index].value = mysoncart[index].number
			myload()
		}
		
		function mydelete(a) {
			//子页面删除按钮
			mysoncart.splice(a, 1)
			myload()
		}
		//总计
		let oZONG=document.querySelector('.total_prices')
		function mysonIpt(){
			let myCheckbox=document.querySelectorAll('.checkbox')
			let oNum1=0
			for(let i=0;i<myCheckbox.length;i++){
				if(myCheckbox[i].checked==true){
					oNum1+=mysoncart[i].number*mysoncart[i].price
				}
			}
			oZONG.innerHTML=oNum1
		}
	</script>
</html>